<template>
  <div class="employ-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <span>总记录数:{{ total }}条</span>
        </template>
        <template #right>
          <el-button
            type="warning"
            size="small"
            @click="$router.push('/import')"
          >导入excel</el-button>
          <el-button
            type="danger"
            size="small"
            @click="ExportExcel"
          >导出excel</el-button>
          <el-button
            type="primary"
            size="small"
            @click="addEmploy"
          >新增员工</el-button>
        </template>
      </page-tools>
      <!-- 员工列表 -->
      <el-card style="margin-top: 10px">
        <el-table border :data="list">
          <el-table-column label="序号" type="index" width="120" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="头像">
            <template #default="{ row }">
              <image-place-holder
                :url="row.staffPhoto"
                @click.native="clickShowCodeDialog(row.staffPhoto)"
              />
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式">
            <template #default="scope">
              <!-- 插值表达式支持函数执行 并且渲染的是函数的return值 -->
              {{ formatEmployment(scope.row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间">
            <template #default="{ row }">
              {{ formattimeOfEntry(row.timeOfEntry) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button
                type="text"
                size="small"
                @click="goDetail(scope.row.id)"
              >查看</el-button>
              <el-button type="text" size="small" @click="assignRole(scope.row.id)">分配角色</el-button>
              <el-button
                type="text"
                size="small"
                @click="delEmployee(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            @current-change="pageChange"
          />
        </div>
      </el-card>
    </div>
    <!-- 新增组件 -->
    <add-employee :show-dialog="showDialog" @close-dialog="closeDialog" />
    <!-- 分享展示, 预览的二维码的弹层 -->
    <el-dialog
      title="二维码"
      :visible="showCodeDialog"
      @close="showCodeDialog = false"
    >
      <!-- 二维码 -->
      <el-row type="flex" justify="center">
        <canvas ref="myCanvas" />
      </el-row>
    </el-dialog>
    <!-- 分配角色 -->
    <assign-role
      :show-role-dialog="showRoleDialog"
      :cur-id="curId"
      @close-dialog="closedialog"
    />
  </div>
</template>

<script>
import dayjs from 'dayjs'
// 加载中文语言包
import 'dayjs/locale/zh-cn'
import { reqGetEmployeeList, delEmployee } from '@/api/employees'
import AddEmployee from './components/add-employee'
import { getExportData } from '@/utils/excelData'
import AssignRole from './components/assign-role'
import QrCode from 'qrcode'
export default {
  components: {
    AddEmployee,
    AssignRole
  },
  data() {
    return {
      showCodeDialog: false,
      list: [],
      params: {
        page: 1,
        size: 10
      },
      total: 0,
      showDialog: false,
      showRoleDialog: false,
      curId: '' // 当前那个点击分配角色的id
    }
  },
  mounted() {
    this.getEmployeeList()
  },
  methods: {
    // 获取员工信息
    async getEmployeeList() {
      const res = await reqGetEmployeeList(this.params)
      this.list = res.data.rows
      console.log(this.list)
      this.total = res.data.total
    },
    // 分页
    pageChange(page) {
      this.params.page = page
      this.getEmployeeList()
    },
    // 修改聘用形式
    formatEmployment(type) {
      // 根据源数据经过处理 把处理之后的数据返回
      // 定义一个映射结构
      const map = {
        1: '正式',
        2: '非正式'
      }
      return map[type]
    },
    // 修改时间格式
    formattimeOfEntry(type) {
      return dayjs(type).format('YYYY-MM-DD')
    },
    // 删除功能
    delEmployee(id) {
      this.$confirm('确认删除此员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delEmployee(id)
          // 更新列表
          this.getEmployeeList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    addEmploy() {
      this.showDialog = true
    },
    closeDialog() {
      this.showDialog = false
    },
    // 导出
    // 导出本质:
    // 1,export2Export插件 把js数据转化成一个excel表格文件 并且触发自动下载功能完成下载
    // 2,获得插件要求的数据:调用接口拿到插件必要的数据 ,将格式处理好
    ExportExcel() {
      // 实现导出
      import('@/vendor/Export2Excel').then(async(excel) => {
        // 1,接口调用获取数据
        const res = await reqGetEmployeeList(this.params)
        // 2,处理数据
        const headerRelation = {
          手机号: 'mobile',
          姓名: 'username',
          入职日期: 'timeOfEntry',
          工号: 'workNumber',
          转正日期: 'correctionTime',
          部门: 'departmentName'
        }
        const { header, data } = getExportData(res.data.rows, headerRelation)
        excel.export_json_to_excel({
          header, // 表头->数组
          data, // 表格主体->二维数组[[],[],[]]
          filename: '员工列表', // 导出文件名字
          autoWidth: true, // 内容列的自动宽度
          bookType: 'xlsx' // 文件后缀名 文件类型
        })
        // this.downloadLoading = false
      })
    },
    // 用户跳转详情
    goDetail(id) {
      this.$router.push({
        path: '/employeeDetall',
        query: {
          id
        }
      })
    },
    clickShowCodeDialog(url) {
      if (!url) return
      this.showCodeDialog = true
      this.$nextTick(() => {
        // 如果这里 url 写的是网址, 就会跳转到对应网址 (二维码分享效果)
        QrCode.toCanvas(this.$refs.myCanvas, url)
      })
    },
    // 分配角色
    assignRole(id) {
      this.showRoleDialog = true
      this.curId = id
    },
    // 关闭按钮
    closedialog() {
      this.showRoleDialog = false
    }
  }

}
</script>

 @close-dialog="
      closedialog"
